<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</head>

<body>
    <script>
        // 一个 new Promise()只能解决两层嵌套的ajax,多层的ajax需要多个Promise对象

        // 需要什么任务就放什么任务 ()  封装异步任务
        function ajaxTool(url, method, params) {
            return new Promise((resolve, reject) => {
                $.ajax({
                    url,
                    method,
                    data: {
                        ...params
                    },
                    success: (data) => {
                        resolve(data); // 返回promise获取的数据
                    }
                })
            });
        }

        let p1 = ajaxTool("http://localhost:8080/getcity?cityname=北京市", "GET");
        // 初始写法
        // p1.then((res) => {
        //     // 根据城市获取天气
        //     let p2 = ajaxTool(`http://localhost:8080/weather?cityname=${res.name}`, "GET");
        //     p2.then((res1) => {
        //         return p2;
        //     });
        // });

        // 优化嵌套写法
        let p2 = p1.then((res) => {
            console.log(p1);    // 北京市
            // 根据城市获取天气   ajax中 GET 默认可以省略
            return ajaxTool(`http://localhost:8080/weather?cityname=${res.name}`, "GET");
        });

        let p3 = p2.then((res) => {
            console.log(p2);    // temp: '18℃', wind: '1级 南风'
            // 获取出行建议 发送天气度数  res.weather.temp
            return ajaxTool(`http://localhost:8080/suggest?temp=${res.weather.temp}`, "GET");
        });
        p3.then((res) => {
            console.log(res);
        })
        // 如果promise 不加return返回数据  就会默认 undefined
        .then((res) => {
            console.log(res);   // undefined
        })
    </script>
</body>

</html>